@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-loader';

$sizes: 's', 'xs';

@mixin progress-anatomy-styles {
  @each $size in $sizes {
    &[data-size="#{$size}"] {
      @include composite-var($progress-bar, 'container', $size);
    }
  }
}

.progressBarContainer {
  @include progress-anatomy-styles;

  background-color: $sys-neutral-decor-default;
}

.progressBarFiller {
  width: var(--progress);
  height: 100%;
  background-color: $sys-primary-accent-default;
  border-radius: inherit;
}
